<template>
	<view class="viewbox auto p-top24 p-bot100" :style="{'--color': color}">
		<view class="list" v-for="(item,index) in pageData" :key="index">
			<view class="list_info">
				<image :src="$imgUrls(item.v_headimg)" mode="aspectFill" v-if="item.v_headimg" class="v_headimg">
				</image>
				<view class="flex-1 d-flex f-column">
					<view class="d-flex">
						<text class="color_33 size28">{{item.v_name}}</text>
						<view class="bussName">{{item.vip_name}}</view>
					</view>
					<text class="black size26 m-top6">{{item.v_addtime}}</text>
				</view>
			</view>

			<view class="row j-sb padding24">
				<view class="Numall">
					<text class="work_num">{{item.member_count}}</text>
					<text class="work_txt">直属客户</text>
				</view>
				<view class="Numall">
					<text class="work_num">{{item.order_count}}</text>
					<text class="work_txt">直属客户订单</text>
				</view>
				<view class="Numall">
					<text class="work_num">{{item.order_money}}</text>
					<text class="work_txt">直属订单金额</text>
				</view>
			</view>

		</view>


		<!-- <view class="iconfont icon-zengjia4 color size62" @click.stpop="show = true"></view> -->
		<emptys v-if="!pageData.length" title="暂无相关信息"></emptys>

		<u-popup :show="show" @close="show = false" round="10" :overlayOpacity="0.1" closeable :closeOnClickOverlay="false">
			<view class="viewboxs auto p-top30 p-bot50">
				<text class="row j-centert black size36 bold">添加员工</text>
				<view class="Verify">
					<input type="number" class="Tel" v-model="Tel" placeholder="请输入手机号码" />
					<view class="VerifyBtn" @click="VerifyCode">验证</view>
				</view>
				<view class="row a-center m-top30">
					<image :src="$imgUrls(userInfo.v_headimg)" mode="aspectFill" class="v_headimg"></image>
					<view class="flex-1 d-flex f-column">
						<text class="black size28">{{userInfo.v_name}}</text>
						<text class="black size28">{{userInfo.v_tel}}</text>
					</view>
				</view>

				<view class="Continue" :class="{'Config':Flag}" @click="Continue">确定</view>

			</view>

		</u-popup>

		<view class="footer" @click.stpop="show = true">添加员工</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				pageData: [],
				show: false,
				Tel: '',
				userInfo: '',
			}
		},
		onLoad() {
			this.getWorkers()
		},
		methods: {
			getWorkers() {
				this.$http.get({
					url: '/WokersApi/getWorkers'
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg)
					const result = res.data || []
					this.pageData = result
				})
			},
			VerifyCode() {
				if (!this.Tel) return this.$Toast('请输入手机号码');
				if (!this.Tel.match(this.$reg.phone)) return this.$Toast('手机号码输入有误');
				this.$http.get({
					url: '/WokersApi/getMemberInfo',
					data: {
						tel: this.Tel
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg)
					this.userInfo = res.data
				})
			},
			Continue() {
				if (!this.Flag) return;
				this.$http.post({
					url: '/WokersApi/bindWorkers',
					data: {
						tel: this.Tel
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg)
					this.show = false
					this.$Toast(res.msg)
					this.getWorkers()
				})
			}
		},
		computed: {
			...mapState(['color', 'position']),
			Flag() {
				if (this.userInfo && this.Tel && this.Tel.match(this.$reg.phone)) {
					return true
				} else {
					return false
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.list {
		width: 100%;
		background-color: #f8f8f8;
		margin-bottom: 24rpx;
		border-radius: 4rpx;
		display: flex;
		flex-direction: column;
	}

	.list_info {
		width: 100%;
		padding: 20rpx 24rpx;
		border-bottom: 1rpx solid #f1f1f1;
		display: flex;
	}

	.v_headimg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.bussName {
		background-color: var(--color);
		padding: 2rpx 12rpx;
		color: #fff;
		font-size: 22rpx;
		margin-left: 10rpx;
		border-radius: 6rpx;
	}

	.Numall {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.work_num {
		color: #000;
		font-size: 32rpx;
	}

	.work_txt {
		color: #000;
		font-size: 28rpx;
		margin-top: 6rpx;
	}

	.icon-zengjia4 {
		position: fixed;
		right: 10rpx;
		bottom: 20%;
	}

	.Verify {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #ccc;
		border-radius: 6rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}

	.Tel {
		flex: 1;
		height: 100%;
		color: #000;
		font-size: 28rpx;
	}

	.VerifyBtn {
		width: 150rpx;
		height: 100%;
		background-color: var(--color);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;
	}

	.Continue {
		width: 100%;
		height: 80rpx;
		margin: 40rpx auto 0;
		background-color: #ccc;
		color: #fff;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
	}

	.Config {
		background-color: var(--color);
	}

	.footer {
		width: 690rpx;
		height: 80rpx;
		background-color: var(--color);
		color: #fff;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
	}
</style>